<template>
  <div class="todo-table">
    <x-table
      :pagination="pagination"
      :data-source="tableData"
      :loading="loading"
      :row-key="'id'"
      @on-change="handleTableChange"
      @on-selection-change="handleSelectionChange"
    >
      <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
      <el-table-column
        v-for="item in todoColums"
        :key="item.prop"
        :prop="item.prop"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
        :width="item.width"
        :label="item.label"
        :sortable="'custom'"
      >
      </el-table-column>
      <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="80">
        <template slot-scope="scope">
          <more-table-actions :action-list="todoActions" :row="scope.row" @onActionClick="handleActions" />
        </template>
      </el-table-column>
    </x-table>
  </div>
</template>
<script>
  import { TableListMixin } from '@package/utils'
  import { listTodoUrl as listUrl } from '@package/components/src/workflow/api/workFlow/FlowLaunch.js'
  import { todoColums, todoActions } from '../config/home.js'

  export default {
    name: 'QuickAccess',
    mixins: [TableListMixin],
    data() {
      return {
        listUrl,
        loading: false,
        todoColums,
        todoActions
      }
    },
    watch: {
      'pagination.total': {
        handler(val) {
          if (this.pagination.total) {
            this.$emit('on-count', this.pagination.total)
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      handleActions({ key, data }) {
        if (key === 'approval') {
          this.$router.push({
            path: '/workflow/flowTodo',
            query: data
          })
        }
      }
    }
  }
</script>
